<template>
  <div class="cost-summary">
    <ProTable
      ref="account_checking_list_table"
      :immediate="true"
      :request="getSettleSummaryList"
      :search-form="formList"
      :columns="columns"
      :pagination="true"
      :before-search-submit="beforeSearchSubmit"
    >
    </ProTable>
  </div>
</template>

<script>
import ProTable from '@/components/ProTable';
import {omit} from 'lodash';
import {getMerchantAllMerchant,getSettleSummaryList} from '@/api/statement';
import {getDateYMD,getDateRangeDate} from '@/utils/date';
import util from '@/utils/util'
import Authc from "@/components/Authc";

export default {
  name: 'RevenueCostSummary',
  components: {
    ProTable,
    Authc
    },
  data() {
    const self=this
    const date = new Date(new Date()-24*60*60*1000);
    return {
      formList: [
        {
          type: 'date',
          name: 'actualClearDate',
          label: '应清算日期',
          value: date,
          props: {
            placeholder: '请选择',
            type: 'date',
            format: 'yyyy-MM-dd'
          }
        },
        {
          type: 'select',
          name: 'merchantCode',
          label: '商户',
          value: '',
           props: {
            placeholder: '请选择',
            optionList: [],
            clearable: true,
            filterable:true
          }
        },
        {
          type: 'select',
          name: 'payChannel',
          label: '交易渠道',
          value: 'ums',
           props: {
            placeholder: '请选择',
            optionList: [
                { label: "银联渠道", value: "ums" },
                { label: "招总行渠道", value: "cmb" },
                { label: "富滇渠道", value: "fudian" },
            ],
            clearable: true
          }
        }
      ],
      columns: [
        {
          title: '实际清算日期',
          key: 'actualClearDate',
          align: 'center',
        },
        {
          title: '商户名称',
          key: 'merchantName',
          align: 'center',
        },
        {
          title: '交易渠道名称',
          key: 'payChannelName',
          align: 'center',
        },
        {
          title: '渠道交易金额总和',
          key: 'channelFlowTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.channelFlowTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '渠道退款金额总和',
          key: 'channelRefundTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.channelRefundTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '渠道清出金额总和',
          key: 'channelClearTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.channelClearTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '中台交易金额总和',
          key: 'mdFlowTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.mdFlowTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '中台退款金额总和',
          key: 'mdRefundTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.mdRefundTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '中台清出金额总和',
          key: 'mdClearTotalAmount',
          align: 'center',
          render: (h, params) => {
            let item = params.row.mdClearTotalAmount / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '交易差异金额',
          key: 'differentAmountFlow',
          align: 'center',
          render: (h, params) => {
            let item = params.row.differentAmountFlow / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '退款差异金额',
          key: 'differentAmountRefund',
          align: 'center',
          render: (h, params) => {
            let item = params.row.differentAmountRefund / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
          title: '清出差异金额',
          key: 'differentAmountClear',
          align: 'center',
          render: (h, params) => {
            let item = params.row.differentAmountClear / 100;
            return h('span', util.toMoney(item))
          }
        },
        {
            title: "操作",
            key: "action",
            align: "center",
            permissions: ["trade:settlement:settleManage:funds"],
            // fixed: "right",
            render: function(h, data) {
                return h('div',[
                     h('a', {
                        props: {
                            type: 'primary',
                            size: 'small'
                        },
                        style: {
                            marginRight: '5px'
                        },
                        on: {
                            click: () => {
                                self.handleDetail(data.row,'detail')
                            }
                        }
                    }, '详情'),
                ]);
            }
        }
      ]
    };
  },
  computed: {

  },
    async created(){
      await this.initQuery()
  },
  methods: {
    getSettleSummaryList,
    exportExcelAll () {
      this.$refs['order_data_summary'].exportLocalCsv("订单汇总数据导出")
    },
    handleDetail(row,type) {
        let searchParams=this.$refs['account_checking_list_table'].getSearchParams()
        switch (type) {
          case 'detail':
            this.$router.push({path: 'accountChecking', query: {
              merchantCode: row.merchantCode||'',
              actualClearDate:searchParams.actualClearDate?util.formatDate(searchParams.actualClearDate):'',
              payChannel:searchParams.payChannel||'',
            }});
            break
        }
    },
    exportExcel() {
    },
    beforeSearchSubmit(data) {
      const {actualClearDate} = data;
      if(actualClearDate){
          data.actualClearDate=util.formatDate(actualClearDate)
      }
      console.log('beforeSearchSubmit:',data)
      return omit(data, 'date');
    },
    async initQuery(){
       // 查询商户
      const merchantList=await getMerchantAllMerchant();
      const selectMerchantList = merchantList.map(({merchantCode, merchantName}) => {
        return {
          value: merchantCode,
          label: merchantName
        };
      });
      this.setSearchOptionListInitValue("merchantCode",selectMerchantList)

  },
  setSearchOptionListInitValue(name,value){
      this.formList.map(item=>{
        if(item.name===name && item.props){
          item.props.optionList=value
        }
      })
    }
  }
};
</script>
<style>
.cost-summary{
  min-height: 500px;
  height: 100%;
}
</style>
